<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="formRef"
				:inline="true"
				:model="queryData"
				class="flex-warp-container"
			>
				<el-form-item
					:label="`${$t('common.belong_merchant')}:`"
					class="flex-row-container"
					label-width="80px"
				>
					<merchant-select
						v-model="queryData.merchantId"
						:merchantInfo.sync="merchantObj"
					></merchant-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('操作时间')}:`"
					class="flex-row-container"
					label-width="80px"
				>
					<el-date-picker
						v-model="searchTime"
						type="daterange"
						:default-time="defaultTime"
						range-separator="-"
						:start-placeholder="$t('report.start_date')"
						:end-placeholder="$t('report.end_date')"
						:picker-options="pickerShortcutWithCurrPeriod"
						:clearable="false"
					></el-date-picker>
				</el-form-item>
				<el-form-item
					label="代理账号:"
					class="flex-row-container"
					label-width="80px"
				>
					<el-input
						v-model.trim="queryData.proxyName"
						:maxlength="11"
						clearable
						autocomplete="off"
						v-symbols
						style="width: 150px;"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<el-form-item
					label="操作人:"
					class="flex-row-container"
					label-width="80px"
				>
					<el-input
						v-model.trim="queryData.operationName"
						:maxlength="11"
						clearable
						autocomplete="off"
						v-symbols
						style="width: 150px;"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<el-form-item
					label="业务模式:"
					class="flex-row-container"
					label-width="77px"
				>
					<el-select
						v-model="queryData.businessModel"
						size="medium"
						:placeholder="$t('common.select_all')"
						style="width: 200px"
						clearable
					>
						<el-option
							v-for="item in businessModelList"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item class="flex-row-container">
					<el-button
						type="primary"
						icon="el-icon-search"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				ref="elTable"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:max-height="tableHeight"
				:data="tableData"
				:default-sort="{
					prop: 'staticsDate',
					order: 'descending'
				}"
				:key="headKey"
				v-bind="$attrs"
				v-on="$listeners"
				@sort-change="changeTableSort"
				:header-cell-style="getRowClass"
				highlight-current-row
			>
				<el-table-column
					v-for="(item, index) in newCol"
					:key="'column_' + index"
					:prop="newCol[index].prop"
					:align="item.alignCenter"
					:label="item.label"
					:min-width="item.minWidth"
					:fixed="item.isFixed"
					:sortable="item.isSortColumn"
					:show-overflow-tooltip="item.isShowTip"
				>
					<!-- 通过插槽为表头绑定mousedown和dragover方法 -->
					<template slot="header" slot-scope="{ column, $index }">
						<span
							@mousedown="
								handleMounseDown($event, column, $index)
							"
							@dragover="handleDragover($event, column, $index)"
						>
							{{ item.label }}
						</span>
					</template>
					<template slot-scope="{ row }">
						<div v-if="item.solt === 'numberSolt'">
							<span
								:style="
									handleNumberColor(row[newCol[index].prop])
								"
							>
								{{
									handleNumber(
										'USDT',
										row[newCol[index].prop],
										2
									)
								}}
							</span>
						</div>
						<div v-if="item.solt === 'copySolt'">
							<Copy :title="row[newCol[index].prop]" :copy="copy">
								{{ row[newCol[index].prop] }}
							</Copy>
						</div>
						<div v-if="item.solt === 'business'">
							<span>
								{{
									mappingBusinessModel(
										row[newCol[index].prop]
									)
								}}
							</span>
						</div>
						<div v-if="item.solt === 'defaultSolt'">
							<span>
								{{ row[newCol[index].prop] || '-' }}
							</span>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				v-show="!!total"
				class="pageValue"
				:current-page.sync="pageNum"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size.sync="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { routerNames } from '@/utils/consts'
// import Sortable from 'sortablejs'
import { Storage } from '@/utils/compose'
import { getColumns } from './components/columns'
import MainContent from '@/components/MainContent/index.vue'
const setSearchTime = () => [
	dayjs()
		.subtract(0, 'day')
		.startOf('day'),
	dayjs()
		.subtract(0, 'day')
		.endOf('day')
]
export default {
	name: routerNames.memberReturnData,
	components: {
		MainContent
	},
	mixins: [list],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			searchTime: setSearchTime(),
			queryData: {},
			tableData: [],
			subSummary: {},
			totalSummary: {},
			billDateList: [],
			detailData: {},
			memberDatas: [],
			businessModelList: [
				{
					description: '现金业务',
					code: '1'
				},
				{
					description: '信用业务',
					code: '2'
				}
			],
			visible: false,
			loading: false,
			exportBtnLoading: false,
			dropCol: [],
			newCol: [],
			colSettings: {
				visible: false
			},
			headKey: 'agentRebateData', // 表头数组变换位置时，重绘table（不更新该值，表头数组变化时，页面不会改变）
			scrollX: 0 // 初始x轴scroll位置（用于定位X轴滚动条）
		}
	},
	computed: {},
	created() {
		const storageColumn = this.getSaveTableData()
		this.dropCol = getColumns()
		const uu_Id = this.$store.state.user.userInfo?.id
		this.newCol =
			storageColumn &&
			storageColumn[`${uu_Id}_commonTableKey_memberReturnData`]
				? storageColumn[`${uu_Id}_commonTableKey_memberReturnData`]
				: this.dropCol
	},
	mounted() {},
	methods: {
		changeTableSort({ column, prop, order }) {
			this.queryData.orderKey = prop
			if (order === 'ascending') {
				// 升序
				this.queryData.orderType = 'asc'
			} else if (column.order === 'descending') {
				// 降序
				this.queryData.orderType = 'desc'
			} else {
				delete this.queryData.orderKey
				delete this.queryData.orderType
			}
			this.loadData()
		},
		loadData() {
			const timeArr = this.searchTime || []
			const params = {
				...this.queryData,
				operationStartTime: dayjs(timeArr[0]).format('YYYYMMDD'),
				operationEndTime: dayjs(timeArr[1]).format('YYYYMMDD'),
				...this.getParams()
			}
			this.removeEmptyValues(params)
			this.loading = true
			this.$api
				.revenueRecordList(params)
				.then((res) => {
					this.loading = false
					if (res.code === 200) {
						this.tableData = []
						this.tableData = res?.data?.record || []
						this.total = res?.data?.totalRecord || 0
						this.subSummary = res?.data?.summary || {}
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		removeEmptyValues(obj) {
			for (let key in obj) {
				if (
					obj[key] === null ||
					obj[key] === undefined ||
					obj[key] === ''
				) {
					delete obj[key]
				} else if (typeof obj[key] === 'object') {
					removeEmptyValues(obj[key]) // 递归调用，处理嵌套对象
					if (Object.keys(obj[key]).length === 0) {
						delete obj[key] // 删除嵌套对象后如果为空，也删除该键值对
					}
				}
			}
			return obj
		},
		search() {
			this.pageNum = 1
			this.loadData()
		},
		reset() {
			this.pageNum = 1
			this.queryData = {}
			this.searchTime = setSearchTime()
			this.loadData()
		}
	}
}
</script>

<style lang="scss" scoped>
.tips-box {
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -12px;
}
::v-deep .el-dialog__header {
	color: #909399;
	font-weight: 700;
}
::v-deep .el-table__fixed-footer-wrapper .cell,
::v-deep .el-table__footer-wrapper .cell {
	height: 100%;
	padding: 0 !important;
	margin: 0 !important;
	> div {
		height: 100%;
	}
}
::v-deep .footer_count_row {
	min-height: 50px;
	height: 50%;
	display: flex;
	font-weight: 700;
	padding: 5px 0;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
::v-deep .footer_count_row_border {
	border-top: 1px solid #ebeef5;
}
.input-with-select {
	width: 110px;
}
.ptop {
	padding-top: 2px;
	margin-left: 10px;
}
</style>
